<template>
	<view class="topcontain">
		<swiper  :autoplay="true" :interval="3000" :duration="500" class="swipercont">
			<swiper-item>
				<view class="swiper-item">
					<image src="/static/image/prod2.png" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="postioncont">
			<view class="posiicon">
				<uni-icons type="location-filled" size="22" color="#fff"></uni-icons>
			</view>
			<view class="posititle_cont">
				<view class="posititle">
					青岛世贸中心店
				</view>
				<view class="far_sub">
					距您500m
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
 .topcontain{
 	padding: 0 17rpx 0 19rpx;
 	box-sizing: border-box;
 	width:100%;
 	height: 388rpx;
 	background:#4863EA;
	overflow: hidden;
 	background-size: 100% 100%;
 }
 .topcontain .swipercont{
 	width: 100%;
 	margin-top: var(--status-bar-height);
 	height: 247rpx;
 	border-radius: 4px;
 	background-color: #007AFF;
 }
 .topcontain .swipercont swiper-item{
 	height: 100%;
 	width: 100%;
 }
 .topcontain .swipercont swiper-item .swiper-item, .swiper-item image{
 	height: 100%;
 	width: 100%;
 }
 .postioncont{
 	width: 714rpx;
 	height: 96rpx;
 	background-color: #fff;
 	margin-top: 17rpx;
 	position: absolute;
 	border-radius: 4px;
 	display: flex;
 	align-items: center;
 
 }
 .postioncont .posiicon{
 	width: 57rpx;
 	height: 57rpx;
 	margin:0 19rpx ;
	background-color: $base-color;
	text-align: center;
	line-height: 57rpx;
	border-radius: 15rpx;
 }
 .posiicon image{
 	height: 100%;
 	width: 100%;
 }
 .posititle_cont{
 		height: 100%;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 }
 .posititle{
 	font-size: 26rpx;
 	font-weight: 900;
 }
 .far_sub{
 	font-size: 19rpx;
 	color: #7B7B7C;
 }
</style>
